<template>
    <div class="main-module">
        <mainMenu
            :moduleConfig="moduleConfig"
            :defaultModule="defaultModule"
            @changeModul="changeModul"
        ></mainMenu>
        <counter :show="UIStatus.counter"></counter>
        <component v-bind:is="currentTabComponent" :ModulchangeStatus="status"></component>
        <DModel :title="dialog.title" v-model="dialog.status">
            <component slot="content" v-bind:is="dialog.Component"></component>
        </DModel>
    </div>
</template>

<script>
import mainMenu from '@/compontent/mainMenu/index.vue'
import { moduleConfig } from './config'
import counter from './CommonCompontent/counter.vue'

let viewModules = {};
const files = require.context('./module', true, /view\.vue$/)
files.keys().forEach(key => {
    viewModules['main-' + key.replace(/(\.\/|\/view\.vue)/g, '')] = files(key).default
});

export default {
    components: {
        counter,
        mainMenu,
        ...viewModules
    },
    data() {
        return {
            dialog: {
                status: false,
                title: '',
                Component: '',
            },
            UIStatus: {
                counter: false,
            },
            status: false,
            moduleConfig: moduleConfig,
            currentTabComponent: '',
            defaultModule: '',
        }
    },
    mounted() {
        setTimeout(() => {
            this.UIStatus.counter = true;
        }, 300)
        this.defaultModule = 'main-equipArrange';
    },
    methods: {
        changeModul(moduleName, type, dialogTitle) {
            if (type == 'dialog') {
                this.dialog.status = true;
                this.dialog.title = dialogTitle;
                this.dialog.Component = moduleName;
            } else {
                this.status = false;
                setTimeout(() => {
                    this.currentTabComponent = moduleName;
                    this.$nextTick(() => {
                        this.status = true;
                    })
                }, 300);
            }
        }
    }
}
</script>

<style lang="less" scoped>
</style>